import {Component, OnInit} from '@angular/core';
import {Subscription} from 'rxjs';
import {NzUploadFile} from 'ng-zorro-antd/upload';

@Component({
  selector: 'app-decal-manage',
  templateUrl: './decal-manage.component.html',
  styleUrls: ['./decal-manage.component.scss']
})
export class DecalManageComponent implements OnInit {
  query: any = {
    name: null,
    category: null,
    status: null,
    date: null,
    // 当前页
    current: 1,
    // 分页大小
    size: 20,
  };
  queryCategoryOptions: any[] = [
    {id: '23123', name: '分类1'},
    {id: '23123253', name: '分类11'},
  ];
  listOfData: any = {
    current: 1,
    total: 100,
    size: 20,
    records: [
      {id: '123', name: '商品名称', price: '87', category: '类型', createTime: '2021-08-10 17:28:00', status: '1'},
      {id: '3425', name: '商品名称22', price: '25', category: '类型44', createTime: '2021-08-10', status: '1'},
    ]
  };
  checked = false;
  indeterminate = false;
  modal: any = {
    modalVisible: false,
    isAdd: true,
  };
  form: any = {
    name: null,
    category: null,
    no: null,
    status: null,
    remark: null,
  };

  goodsDetailImg: any = {
    url: null,
    loading: false,
    fileList: []
  };

  constructor() {
  }

  ngOnInit(): void {
  }

  queryTableList(): void {
    console.log(this.query);
  }

  onPageIndexChange(index: number) {
    console.log(index);
    this.query.current = index;
    // this.checked = false;
    this.queryTableList();
  }

  onPageSizeChange(index: number) {
    console.log(index);
    this.query.current = index;
    // this.checked = false;
    this.queryTableList();
  }


  appendImg() {
    console.log('添加图片');
    this.modal.modalVisible = true;
    this.modal.isAdd = true;
  }

  edit(data: any) {
    console.log(data, '编辑');
    this.modal.modalVisible = true;
    this.modal.isAdd = false;
  }

  // 模态框取消按钮监听
  handleModalCancel() {
    this.modal.modalVisible = false;
    this.resetFormData();
  }

  // 模态框确认按钮监听
  handleModalOk() {
    this.modal.modalVisible = false;
    this.resetFormData();
  }

  // 重置数据
  resetFormData() {
    this.form = {
      name: '',
      status: '',
    };
  }

  deleteRow(id: any) {
    console.log('删除行', id);
  }

  customRequest = () => new Subscription();

  /*
  * 文件改变
  * */
  handleChange(info: { file: NzUploadFile }, obj: any): void {
    obj.fileList = [info.file.originFileObj];
    this.getBase64(info.file.originFileObj, img => {
      obj.url = img;
    });
  }

  /*
  * file转base64*/
  private getBase64(img: any, callback: (img: string) => void): void {
    const reader = new FileReader();
    // @ts-ignore
    reader.addEventListener('load', () => callback(reader.result.toString()));
    reader.readAsDataURL(img);
  }
}
